<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app" class="container">
      <h2>{{ title }}</h2>
      <ul>
        <li>{{ items[0] }}</li>
        <li>{{ items[1] }}</li>
      </ul>
      <div class="footer">
        <hr/>
        <em>Change the title of your shopping list here</em>
        <input v-model="title"/>
      </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
    <script>
      var data = {
        items: ['Bananas', 'Apples'],
        title: 'My Shopping List'
      };
      new Vue({
        el: '#app',
        data: data
      });
    </script>
  </body>
</html>
